<template>
  <div>
    <Card>
      <div class="p-relative">
        <div @click="refresh" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item">
            <Input v-model="searchObj.keywords" placeholder="订单号、门店、用户名、手机号、类目" style="width:250px" />
          </div>
           <div class="flex-item">
            <Select v-model="searchObj.pay_type" style="width:130px" placeholder='请选择支付方式' @on-change="changPayType">
              <Option v-for="item in payType" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>

          <div class="flex-item">
            <Select v-model="searchObj.order_estate" style="width:130px" placeholder='请选择订单状态' @on-change="changEstate">
              <Option v-for="item in orderEstate" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="flex-item">
            <DatePicker @on-change="changeMakeTime" type="daterange" placeholder="请选择预约时间" style="width: 180px">
            </DatePicker>
          </div>
          <div class="flex-item">
            <DatePicker @on-change="changeCreateTime" type="daterange" placeholder="请选择下单时间" style="width: 180px">
            </DatePicker>
          </div>
          <div class="flex-item search-btn" @click="search">
            <Button type="warning">搜索</Button>
          </div>
          <div class="flex-item search-btn" @click="reset">
            <Button>重置</Button>
          </div>
          <div class="flex-item search-btn" @click="exportExcel">
            <Button type="warning">导出</Button>
          </div>
        </div>
      </div>
      <Table :columns="tableOption" :data="data.list" border :no-data-text="loadingText ? loadingText : '暂无数据'" border
        ref="tables" editable search-place="top">
        <template slot-scope="{ row, index }" slot="venue_name">
          {{row.venue_name}}
        </template>

        <template slot-scope="{ row, index }" slot="action">
          <div class="flex-box flex-center flex-margin">
            <Button type='warning' @click="detail(row, index)" size='small'>查看</Button>
            <!--  <Button type='warning' @click="setEstate(row,1)" v-if="row.order_estate==1 || row.order_estate==2" size='small'>核销</Button>-->
               <!-- <Button  @click="setEstate(row,2)" v-if="row.order_estate==1"  size='small'>取消</Button>  -->
          </div>
        </template>
      </Table>
      <Page class="foot-page" :current='page.current' :total="page.total" :page-size="page.pageSize" show-total
        show-elevator @on-change="changepage"></Page>

    </Card>

    <!-- 查看弹窗 -->
    <!-- @on-ok="ok" @on-cancel="cancel" -->
    <Modal v-model="detailModal" title="订单详情" width='75%'>
      <div class="detail-table">
        <div class="base-info" v-for="item in formItem.detail">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">订单基本信息</Col>
          </Row>
          <!-- ff6600 -->
          <Row class='row-main-content' >
            <Col span="8"><span class="font-gray">订单号：</span>{{item.order_no}}</Col>
            <Col span="8"><span class="font-gray">交易流水号：</span>{{item.callback_trade_no}}</Col>
            <Col span="8"><span class="font-gray">订单状态：</span><label
              style="color: #ff6600;">{{item.order_estate_name}}</label>
              <!-- <Button type='warning' @click="setEstate(formItem.detail,1)" style="margin: 0 5px;" v-if="formItem.detail.order_estate==1 || formItem.detail.order_estate==2" size='small'>核销</Button>
              <Button  @click="setEstate(formItem.detail,2)" v-if="formItem.detail.order_estate==1"  size='small'>取消</Button> -->
              </Col>

          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">门店：</span>{{item.store_name}}</Col>
            <Col span="8"><span class="font-gray">名称:</span>{{item.related_name}} </Col>
            <Col span="8"><span class="font-gray">规格:</span>{{item.norms_value_name}}</Col>

          </Row>
          <Row class='row-main-content'>

            <Col span="8"><span class="font-gray">价格:</span>{{item.related_price}}</Col>
            <Col span="8"><span class="font-gray">数量:</span>{{item.related_num}}</Col>
             <Col span="8"><span class="font-gray">取货方式</span>{{item.deliver_type?'自提':'配送'}}</Col>

          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">联系人：</span>{{item.deliver_name}}</Col>
            <Col span="8"><span class="font-gray">联系人电话：</span>{{item.deliver_tel}}</Col>
            <Col span="8"><span class="font-gray">收货地址：</span>{{item.deliver_address}}</Col>

          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">支付金额：</span>￥{{item.amount}}元
            <span v-if="formItem.detail.coupon_id>0">({{item.coupon_name}} -{{item.coupon_fee}}元)</span>
            </Col>
            <Col span="8"><span class="font-gray">支付方式：</span>{{item.pay_type_name}}</Col>
            <Col span="8"><span class="font-gray">支付时间：</span>{{item.pay_time}}</Col>

          </Row>
          <Row class='row-main-content'>
            <Col span="8"><span class="font-gray">下单时间：</span>{{item.create_time}}</Col>
            <Col span="8"><span class="font-gray">取消时间：</span>{{item.cancel_time}}</Col>
             <Col span="8">
                <Button @click='' type="warning">退款</Button>
             </Col>
          </Row>

        </div>
        <div class="base-info" >
            <Row class='row-main-title font16 table-head-bg padding10'>
                <Col span="8"> 总金额：{{amount}}元
             </Col>
             <Col span="8">
               &nbsp;
             </Col>
                 <Col span="8">
             <Button @click='' type="warning">全部退款</Button></Col>
              </Row>
        </div>

      </div>

      <div class="detail-table">
        <div class="base-info">
          <Row class='row-main-title font16 table-head-bg padding10'>
            <Col span="24">订单日志</Col>
          </Row>
          <!-- ff6600 -->
          <Row class='font16 row-main-title  padding10 table-head-bg'>
            <Col span="2">操作人</Col>
            <Col span="2">订单状态</Col>
            <Col span="14">信息</Col>
             <Col span="2">操作备注</Col>
            <Col span="2">日期</Col>
          </Row>
          <Row class='row-main-content' v-for="(item,index) in formItem.order_log">
            <Col span="2"><span class="font-gray">{{item.manager_id>0?item.nickname:'用户'}}</span></Col>
            <Col span="2"><span class="font-gray">{{item.estate_name}}</span></Col>
            <Col span="14"><span class="font-gray">{{item.remark}}</span></Col>
             <Col span="2"><span class="font-gray">{{item.operator_remark}}</span></Col>
            <Col span="2"><span class="font-gray">{{item.create_time}}</span></Col>

          </Row>
        </div>

      </div>
      <div slot="footer">
        <Button @click='detailModal=false'>关闭</Button>

      </div>
    </Modal>

    <!-- 核销弹窗 -->
    <Modal v-model="statusModal" title="提示" width="250">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定要核销该订单吗？
      </p>
      <div slot="footer">
        <Button @click='statusModal=false'>取消</Button>
        <Button type="primary" @click='confirmStatus'>确定</Button>
      </div>
    </Modal>

    <Modal v-model="cancelModal" title="提示" width="250">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定要取消该订单吗？
      </p>
      <div slot="footer">
        <Button @click='cancelModal=false'>取消</Button>
        <Button type="primary" @click='confirmCancel'>确定</Button>
      </div>
    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'
  import {
    formatDate
  } from '@/config/publicTool.js' // 日期转换,//调用的时候formatDate(),不需要this
  // 接口
  import {
    getList,
    getDetail,
    exportData,
    setEstate,
    cancelMakeOrder

  } from '@/api/order-group/make-order'
  import {
    tableOption
  } from '../../../data/order-group/make-order'
  import Tables from '_c/tables'
  import {
    getTableData
  } from '@/api/data'

  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    created() {
      let _this = this
      this.$nextTick(function() {
        _this.role_detail = permission(this.roles, 'order/detail') // 查看权限
        _this.role_export = permission(this.roles, 'order/exportData') // 查看权限
        _this.role_set = permission(this.roles, 'order/setEstate') // 核销
        _this.role_cancel = permission(this.roles, 'order/cancelMakeOrder') // 取消
      })
      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
        roles: state => state.user.roles
      })
    },
    data() {
      return {
        cancelModal:false,
        statusModal:false,
        role_detail: false,
        role_export: false,
        role_cancel:false,
        role_set:false,
        // 查询参数
        searchObj: {
          create_time: [],
          pay_time: [],
          pay_type: '',
          order_estate: '',
          keywords: '',
          make_time: []
        },
        payType: [{
            id: '',
            name: '全部'
          },
          {
            id: 1,
            name: '微信'
          },
          {
            id: 2,
            name: '余额'
          },
          {
            id: 3,
            name: '支付宝'
          },
          {
            id: 4,
            name: '现金'
          }
        ],
        orderEstate: [{
            id: '',
            name: '全部'
          },
          {
            id: 1,
            name: '未使用'
          },
          {
            id: 2,
            name: '使用中'
          },
          {
            id: 3,
            name: '已使用'
          },
          {
            id: 4,
            name: '取消中'
          },
          {
            id: 5,
            name: '已取消'
          }
        ],

        rowId: '',
        tableOption: tableOption,
        amount:0,
        data: {
          list: [],
          detail_list: {},
          order_log:[]

        },
        formItem: {
          detail: [],
          orderEstateList: [],
          order_log:[]
        },

        loadingText: '',
        tableData: [],

        // 分页

        page: {
          pageSize: 10,
          current: 1,
          total: 0
        },
        detailModal: false, // 查看弹窗

        // 权限
        role_view: false,
        role_agree: false
      }
    },
    methods: {
      // 列表数据
      getList() {
        let _this = this

        let params = {
          page: this.page.current,
          pay_type: _this.searchObj.pay_type,
          order_estate: _this.searchObj.order_estate,
          keywords: _this.searchObj.keywords,
          make_time: _this.searchObj.make_time,
          create_time: _this.searchObj.create_time,

        }

        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list
            _this.page.total = result.total
            _this.page.pageSize = result.size

          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },

      changepage(e) {
        this.page.current = e;
        this.getList()
      },
      // 查看
      detail(row) {
        if (!this.role_detail) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        this.rowId = row.id
        this.detailModal = true
        this.view(row.trade_no)
      },
      view(trade_no) {
        let _this = this
        let params = {
          trade_no: trade_no
        }
        getDetail(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.formItem.detail = result.detail
            _this.formItem.order_log = result.order_log
            _this.amount = result.amount
          } else {
            let config = {
              content: res.data.message,
              background: true
            }
            _this.$Message.error(config)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },


      // 刷新
      refresh() {
        this.searchObj = {
          create_time: [],
          pay_time: [],
          pay_type: '',
          order_estate: '',
          keywords: ''
        } // 清空搜索框
        this.getList()
      },
      // 重置
      reset() {
        this.searchObj = {
          create_time: [],
          make_time: [],
          pay_time: [],
          pay_type: '',
          order_estate: '',
          keywords: '',
          order:[]
        } // 清空搜索框
        this.getList()
      },
      // 查询
      search() {
        this.getList()
      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },

      changPayType(e) {
        this.searchObj.pay_type = e
      },

      changEstate(e) {
        this.searchObj.order_estate = e
      },
      changeMakeTime(e) {
        this.searchObj.make_time = e
      },
      changeCreateTime(e) {
        this.searchObj.create_time = e
      },
      //核销和取消弹窗
      setEstate(item,type){

        if(type==1){
          if (!this.role_set) {
            let config = {
              content: '您没有操作权限',
              background: true
            }
            this.$Message.error(config)
            return
          }
          this.statusModal = true;
        }else{
          if (!this.role_cancel) {
            let config = {
              content: '您没有操作权限',
              background: true
            }
            this.$Message.error(config)
            return
          }
          this.cancelModal = true;
        }

        this.order = item
      },
      confirmStatus(){
        let _this = this

        let  order_estate = 0;
        if(_this.order.order_estate==1){
          order_estate =2;
        }else  if(_this.order.order_estate==2){
          order_estate =3;
        }

        let params = {
          id: this.order.id,
          order_estate: order_estate,
        }

        setEstate(params).then(res => {
          if (res.data.status == 1) {
             this.statusModal = false;
            _this.getList();
            _this.$Message.success('操作成功')
            if(_this.formItem.detail!=undefined && _this.formItem.detail!=''){
              if(order_estate==2){
                _this.formItem.detail.order_estate_name = '已支付'
                _this.formItem.detail.order_estate=2;
              }else if(order_estate==32){
                _this.formItem.detail.order_estate_name = '已完成'
                 _this.formItem.detail.order_estate=32;
              }
            }
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      confirmCancel(){
        let _this = this

        let  order_estate = 0;
        if(_this.order.order_estate==1){
          order_estate =5;
        }

        let params = {
          id: this.order.id,
          order_estate: order_estate,
        }

        cancelMakeOrder(params).then(res => {
          if (res.data.status == 1) {
             this.cancelModal = false;
            _this.getList();
            _this.$Message.success('操作成功')
            if(_this.formItem.detail!=undefined && _this.formItem.detail!=''){
              if(order_estate==5){
                _this.formItem.detail.order_estate_name = '已取消'
                _this.formItem.detail.order_estate=5;
              }
            }
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      exportExcel() {
        if (!this.role_export) {
          let config = {
            content: '您没有操作权限',
            background: true
          }
          this.$Message.error(config)
          return
        }
        let _this = this

        let create_time = this.searchObj.create_time[0] ? (formatDate(this.searchObj.create_time[0], 3) + ' - ' +
          formatDate(this.searchObj.create_time[1], 3)) : ''
        let make_time = this.searchObj.make_time[0] ? (formatDate(this.searchObj.make_time[0], 3) + ' - ' + formatDate(
          this.searchObj.make_time[1], 3)) : ''
        let obj = {
          related_types: 'make',
          page: this.page.current,
          pay_estate: _this.searchObj.pay_type,
          order_estate: _this.searchObj.order_estate,
          keywords: _this.searchObj.keywords,
          make_time: _this.searchObj.make_time,
          create_time: _this.searchObj.create_time,
        }

        exportData(obj).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data.url

            window.location.href = result
          } else {
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          // console.log(error)
        })
      },

    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
